<template>
  <borderContainer bg-color="#fffbea" bd-color="#f6ce89" class="activity-over">
    <!-- activityDefaultInfo.backgroundBg -->
    <view class="activity-over-default" :style="activityDefaultImg" />
    <view class="activity-over-desc">
      <view v-if="activityCopywriting.title" class="desc-title">
        {{ activityCopywriting.title }}
      </view>
      <view class="desc-extra">
        {{ activityCopywriting.desc }}
      </view>
    </view>
    <finishButton
      class="activity-over-button"
      :width="300"
      :background-bg="smallButtonBg"
      @click="handleToActivityList"
    >
      立即前往
    </finishButton>
    <cloudTitle class="activity-over-tips" :width="activityDefaultInfo.width">
      {{ activityDefaultInfo.title }}
    </cloudTitle>
  </borderContainer>
</template>

<script>
import Taro from "@tarojs/taro";
import cloudTitle from "./cloud-container";
import finishButton from "@/components/finish-button/index";
import borderContainer from "@/components/border-box/index";
import { smallButtonBg } from "@/libs/image-url";
import {
  NOT_CITY,
  NOT_GRADE,
  NOT_ACTIVITY,
  OVER_ACTIVITY
} from "@/config/base-common";
/**活动不在所在城市 */
const NOT_CITY_IMG =
  "https://xthk.oss-cn-shenzhen.aliyuncs.com/teach/1607048688400_0.06287480043250882_%E7%BB%84%208567%402x.png";
/**所在年级未参与活动、活动已结束 */
const NOT_GRADE_OVER_IMG =
  "https://xthk.oss-cn-shenzhen.aliyuncs.com/teach/1607048901263_0.5887115557831_%E7%BB%84%208571%402x.png";
const DEFAULT_IMG_QUERY = {
  [NOT_ACTIVITY]: {
    title: "活动已结束",
    width: 440,
    backgroundBg: NOT_GRADE_OVER_IMG,
    descCopywriting: {
      desc: "活动已结束，去看看其他活动吧"
    }
  },
  [OVER_ACTIVITY]: {
    title: "活动已结束",
    width: 440,
    backgroundBg: NOT_GRADE_OVER_IMG,
    descCopywriting: {
      desc: "活动已结束，去看看其他活动吧"
    }
  },
  [NOT_CITY]: {
    title: "活动不在您所在的城市",
    width: 440,
    backgroundBg: NOT_CITY_IMG,
    descCopywriting: {
      title: "抱歉，该活动不在您所在的城市",
      desc: "去首页看看其他活动吧"
    }
  },
  [NOT_GRADE]: {
    title: "所在年级未参与活动",
    width: 440,
    backgroundBg: NOT_GRADE_OVER_IMG,
    descCopywriting: {
      title: "抱歉，您所在年级未参与该活动",
      desc: "去首页看看其他活动吧"
    }
  }
};
export default {
  props: {
    /**活动状态 */
    activity_status: {
      type: [Number, undefined],
      required: true
    }
  },
  components: {
    cloudTitle,
    finishButton,
    borderContainer
  },
  data() {
    return {
      smallButtonBg
    };
  },
  computed: {
    /**活动缺省信息 */
    activityDefaultInfo() {
      return DEFAULT_IMG_QUERY[this.activity_status] || {};
    },
    /**活动缺省文案信息 */
    activityCopywriting() {
      return this.activityDefaultInfo?.descCopywriting || {};
    },
    /**活动缺省图 */
    activityDefaultImg() {
      return {
        "background-image": `url(${this.activityDefaultInfo?.backgroundBg})`
      };
    }
  },
  methods: {
    /**跳转首页 */
    handleToActivityList() {
      this.$emit("toIndexPageBefore");
      Taro.switchTab({
        url: `/pages/index/index`
      });
    }
  }
};
</script>
<style lang="scss">
.activity-over {
  min-height: 532px;
  width: 100%;
  padding: 90px 0 50px;
  text-align: center;
  position: relative;
  margin-bottom: 64px;
  &-default {
    width: 380px;
    height: 200px;
    margin: 0 auto 32px;
    background-size: 100% 100%;
  }
  &-desc {
    margin-bottom: 32px;
    .desc-title {
      height: 44px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 16px;
    }
    .desc-extra {
      height: 40px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #909399;
      margin-bottom: 32px;
    }
  }
  &-button {
    margin: 0 auto;
  }
  &-tips {
    top: -90px;
  }
}
</style>
